<template>
  <div id="language">
    <HeaderBg>
      <Headers :title="$t('settings.language.title')"/>
    </HeaderBg>
    <div class="lists">
      <ul>
        <li v-for="(item,index) in listItems" :key="index" @click="selectLang(item.type)">
          <div class="list-names">
            <div class="list-title">{{item.text}}</div>
          </div>
          <div class="select-icon" v-if="defaults == item.type">
            <img src="../../../../assets/language_select.png" alt>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import HeaderBg from "components/HeaderBg";
export default {
  name: "language",
  data() {
    return {
      defaults: localStorage.languageType
    };
  },
  computed: {
    listItems() {
      return [
        {
          text: this.$t("settings.language.zh"),
          type: "zh"
        },
        {
          text: this.$t("settings.language.en"),
          type: "en"
        },
        {
          text: this.$t("settings.language.ja"),
          type: "ja"
        },
        {
          text: this.$t("settings.language.ko"),
          type: "ko"
        }
      ];
    }
  },
  methods: {
    selectLang(val) {
      this.$set(this.$i18n, "locale", val); // 当然也可以 this.$i18n.locale = val
      this.defaults = val;
      this.$store.dispatch("CHANGELANGUAGE", val);
    }
  },
  components: {
    HeaderBg
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../../utils/styl/mixin.styl'
#language
  positCenter(0, 0, 0, 0, 0, 0)
  width 100%
  background-color $bodyBg
  .lists
    margin-top rem(130)
    ul
      width 100%
      box-sizing border-box
      padding-left rem(20)
      li
        width 100%
        line-height rem(40)
        background-color $listBg
        margin-bottom rem(9)
        border-top-left-radius rem(28)
        border-bottom-left-radius rem(28)
        display flex
        justify-content space-between
        align-items center
        .list-names
          color $fontColor
          margin-left rem(5)
          width 100%
          text-align left
          .list-title
            margin-left rem(21)
            font-size rem(15)
        .select-icon
          width rem(21)
          height rem(21)
          margin-right rem(20)
          img
            display block
            width 100%
            height 100%
            object-fit contain
</style>
